<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/common/common.jsp" %>
    <link rel="stylesheet" href="${basePath}/plugins/ztree/zTreeStyle/zTreeStyle.css${VERSION}" type="text/css">
</head>
<body>
<div class="right-container">
    <div class="row">
        <div class="col-sm-4">
            <div class="widget-box widget-color-blue2">
                <div class="widget-header">
                    <h4 class="widget-title lighter smaller">部门选择</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <ul id="treeDemo" class="ztree"></ul>
                        <ul class="list">
                            [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ]
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <div class="widget-box widget-color-green2">
                <div class="widget-header">
                    <h4 class="widget-title lighter smaller">人员列表</h4>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div class="container-select text-left">
                            <div class="search-input">
                                <span>用户姓名：</span>
                                <input id="userName" name="userName" type="text"  style="width:150px">
                            </div>
                            <button id="searchBtn" class="btn btn-primary" type="button">
                                <i class="fa fa-search"></i>&nbsp;查询
                            </button>
                        </div>
                        <div class="container-select text-left">
                            <div class="search-input">
                                <span>已选：</span>
                                <input id="userNames" type="text" style="width:100%;"><br>
                                <input id="userIds" type="text" style="width:100%;" hidden>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <table id="grid-table"></table>
                                <div id="grid-pager"></div>
                            </div>
                        </div>
                        <input type="hidden" id="parentId">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- /.main-container -->
<script src="${basePath}/plugins/ztree/jquery.ztree.core.js"></script>
<script src="${basePath}/plugins/jqGrid/jquery.jqGrid.min.js${VERSION}"></script>
<script src="${basePath}/plugins/jqGrid/grid.locale-cn.js${VERSION}"></script>
<script type="text/javascript">
    console.log("dfghjddfgdfhgj fgh")
    var pageii = null;
    var userName;
    var alloterId;
    var userIds = [];
    var userNames = [];
    var counts;

    jQuery(function ($) {
        CommonUtils.grid({
            url: "${basePath}/user/anon/findUsersByOrId",
            colNames: ['用户ID','用户姓名'],
            colModel: [
                {name: 'userId', index: 'userId', key: true, width: 20, sorttype: "int"},
                {name: 'userName',index: 'userName',width: 40}
            ],
            multiselect: true,
            multiboxonly: true,
            onSelectRow: function (rowId, status){
                var rowData = $("#grid-table").jqGrid('getRowData', rowId);
                var userId = rowData.userId;
                var userName = rowData.userName;
                if(status){
                    addElement(userIds, userId);
                    addElement(userNames, userName);
                }else{
                    removeElement(userId, userName);
                }
                showData();
            },
            jsonReader: {
                root: "rows", page: "currentPage", total: "totalPages",
                records: "totalRecords", repeatitems: false, id: "id"
            }
        });
    });

    $("#searchBtn").click(function () {
        queryUsers();
    });

    function queryUsers() {
        if($.trim($('#userName').val())==''){
            layer.msg("请填写搜索条件！");
            return;
        }

        var queryDataUsers = {
            "userName": $.trim($('#userName').val()),
        };

        $("#grid-table").jqGrid("setGridParam",{
                    url: "${basePath}/user/anon/findUsersByOrId",
                    postData:{
                        "userName": $.trim($('#userName').val()),
                        "orgId": ''
                    },
                    datatype: 'json'
                }
        ).trigger("reloadGrid", [{page: 1}]);
    }


    var demoMsg = {
        async: "正在进行异步加载，请等一会儿再点击...",
        expandAllOver: "全部展开完毕",
        asyncAllOver: "后台异步加载完毕",
        asyncAll: "已经异步加载完毕，不再重新加载",
        expandAll: "已经异步加载完毕，使用 expandAll 方法"
    }
    var setting = {
        async: {
            enable: true,
            url: "${basePath}/org/getOrgTree",
            autoParam: ["id=parentId"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
            dataFilter: filter,
            dataType: "json",
            type: "get"
        },
        callback: {
            beforeAsync: beforeAsync,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick: onClick
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        var data = childNodes.data;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            data[i].name = data[i].name.replace(/\.n/g, '.');
        }
        return data;
    }

    function beforeAsync() {
        curAsyncCount++;
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
        curAsyncCount--;
        if (curStatus == "expand") {
            expandNodes(treeNode.children);
        } else if (curStatus == "async") {
            asyncNodes(treeNode.children);
        }

        if (curAsyncCount <= 0) {
            if (curStatus != "init" && curStatus != "") {
                $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                asyncForAll = true;
            }
            curStatus = "";
        }
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        curAsyncCount--;

        if (curAsyncCount <= 0) {
            curStatus = "";
            if (treeNode != null) asyncForAll = true;
        }
    }

    var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
    function expandAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.expandAll);
            zTree.expandAll(true);
        } else {
            expandNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.expandAll);
                curStatus = "";
            }
        }
    }
    function expandNodes(nodes) {
        if (!nodes) return;
        curStatus = "expand";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            } else {
                goAsync = true;
            }
        }
    }

    function asyncAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.asyncAll);
        } else {
            asyncNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.asyncAll);
                curStatus = "";
            }
        }
    }
    function asyncNodes(nodes) {
        if (!nodes) return;
        curStatus = "async";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            } else {
                goAsync = true;
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function reset() {
        if (!check()) {
            return;
        }
        asyncForAll = false;
        goAsync = false;
        $("#demoMsg").text("");
        $.fn.zTree.init($("#treeDemo"), setting);
    }

    function check() {
        if (curAsyncCount > 0) {
            $("#demoMsg").text(demoMsg.async);
            return false;
        }
        return true;
    }

    var orgName;
    var orgId;
    function onClick(event, treeId, treeNode, clickFlag) {

        //orgName = treeNode.name;
        //orgId = treeNode.id;
        //query(treeNode.id);

        $("#grid-table").jqGrid('setGridParam',{
            url: "${basePath}/user/anon/findUsersByOrId",
            postData:{
                orgId: treeNode.id,
                "userName": ''
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入

        curNode = treeNode;

        orgName = treeNode.name;
        orgId = treeNode.id;

    }

    function query(parentId){
        //alert(treeNode.id);
        $("#parentId").val(parentId);
        $("#grid-table").jqGrid('setGridParam',{
            url: "${basePath}/org/getOrgTreeForPage",
            postData:{
                parentId: parentId
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
        $("#expandAllBtn").bind("click", expandAll);
        $("#asyncAllBtn").bind("click", asyncAll);
        $("#resetBtn").bind("click", reset);
    });

    function addElement(target, ele) {
        if(target.indexOf(ele) != -1){
            return;
        }else{
            target.push(ele);
        }
    }

    function removeElement(userId, userName) {
        var newArray = new Array();
        for (var i = 0; i < userIds.length; i++){
            if(userIds[i] != userId){
                newArray.push(userIds[i]);
            }
        }
        userIds = newArray;
        var newArray2 = new Array();
        for (var j = 0; j < userNames.length; j++){
            if(userNames[j] != userName){
                newArray2.push(userNames[j]);
            }
        }
        userNames = newArray2;
    }
    
    function showData() {
        $("#userIds").val(userIds);
        $("#userNames").val(userNames);
    }
</script>
</body>
</html>